<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>UGame</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.raty.min.js"></script>
	<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <link rel="stylesheet" href="css/store.css" type="text/css"/>
</head>
<body>
<div id="wrapper">
<div id="header">
    <img id="dragon" src="images/dragon.png" alt="">

    <div id="action-panel">
        <a id="btn-language" onclick="return false" href="#" style="margin-right: 3px">
            <img src="images/en-US.png" alt="">
        </a>
        <a id="btn-login" onclick="return false" href="#">
            <img src="images/account.png" alt="">
        </a>
        <a id="btn-search" onclick="return false" href="#">
            <img src="images/search.png" alt="">
        </a>
    </div>
    <!-- End #action-panel -->
    <div id="logo-panel">
        <img id="logo" src="images/header-logo.png" alt="">
    </div>
    <!-- End #logo-panel -->

    <div id="search-panel">
        <div class="left-search">

        </div>
        <!-- End .left-search -->
        <div class="center-search">
            <input type="text" id="search-content"/>
        </div>
        <!-- End .center-search -->
        <div class="right-search">
            <a id="cancel-search" href="#"></a>
            <a id="submit-search" href="#">Search</a>
        </div>
        <!-- End .right-search -->
    </div>
    <!-- End #search-panel -->
    <div id="login-panel">
        <div class="login-input">
            <input type="text" value="email"/>
        </div>
        <div class="login-input">
            <input type="text" value="password"/>
        </div>
        <a id="sign-in" href="#">Sign in</a>
        <a href="#">Sign up</a>
    </div>
    <!-- End login-panel -->
    <div id="language-panel">
        <a class="language-item" href="#">
            <span>English</span>
            <img class="language-icon" id="en-US" src="images/en-US.png" alt=""/>
        </a>
        <a class="language-item" href="#">
            <span>Vietnamese</span>
            <img class="language-icon" id="vi-VN" src="images/vi-VN.png" alt=""/>
        </a>
    </div>
    <!-- End language-panel -->
    <div id="main-nav">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td class="active"><a href="#">News</a></td>
                <td><a href="#">Store</a></td>
                <td><a href="#">Forum</a></td>
            </tr>
        </table>
    </div>
    <!-- End #main-nav -->
</div>
<!-- End #header -->

<div id="main">
    <div id="slider">
        <div id="banner-slider">
			 <ul>
			  <li><a href="#"><img width="180" height="120" src="items/banners/1-small.jpg" alt="" /></a></li>
			  <li><a href="#"><img width="180" height="120" src="items/banners/2-small.jpg" alt="" /></a></li>
			  <li><a href="#"><img width="180" height="120" src="items/banners/3-small.jpg" alt="" /></a></li>
			  <li><a href="#"><img width="180" height="120" src="items/banners/4-small.jpg" alt="" /></a></li>
			  <li><a href="#"><img width="180" height="120" src="items/banners/5-small.jpg" alt="" /></a></li>
              <li><a href="#"><img width="180" height="120" src="items/banners/1-small.jpg" alt="" /></a></li>
              <li><a href="#"><img width="180" height="120" src="items/banners/2-small.jpg" alt="" /></a></li>
			</ul>
		</div>
		<div id="banner-slider-current">
			<ul>
			  <li><a href="#"><img width="180" height="120" src="items/banners/2-small.jpg" alt="" /></a></li>
			  <li><a href="#"><img width="180" height="120" src="items/banners/3-small.jpg" alt="" /></a></li>
			  <li><a href="#"><img width="180" height="120" src="items/banners/4-small.jpg" alt="" /></a></li>
			  <li><a href="#"><img width="180" height="120" src="items/banners/5-small.jpg" alt="" /></a></li>
			  <li><a href="#"><img width="180" height="120" src="items/banners/1-small.jpg" alt="" /></a></li>
			</ul>
		</div>
		<a href="#" id="slider-back"></a>
		<a href="#" id="slider-next"></a>
    </div>
    <!-- End #slide -->
    <div class="jcarousel-control">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
    </div>
    <div id="main-content">
        <div class="item">
            <div class="status status-hot">

            </div>
            <!-- End .status -->
            <img class="game-icon" src="images/game-icon.png" alt="">

            <div class="content">
                <h4>Pikachu</h4>
                <p>Lượt tải: 22.990 | Cập nhật: 12/6/2012</p>
                <div class="star"></div>
                <span>403 Ratings</span>
            </div>
            <!-- End .content -->
            <div class="action">
                <p class="free">Free</p>
				<p class="more"></p>
            </div>
            <!-- End .action -->
        </div>
        <!-- End .item -->
        <div class="item alternate-item">
            <div class="status status">

            </div>
            <!-- End .status -->
            <img class="game-icon" src="images/game-icon.png" alt="">

            <div class="content">
                <h4>Pikachu</h4>

                <p>Lượt tải: 22.990 | Cập nhật: 12/6/2012</p>

                <div class="star"></div>
                <span>403 Ratings</span>
            </div>
            <!-- End .content -->
            <div class="action">
                <p class="price">10.000đ</p>
				<p class="more"></p>
            </div>
            <!-- End .action -->
        </div>
        <!-- End .item -->
        <div class="item">
            <div class="status status-new">

            </div>
            <!-- End .status -->
            <img class="game-icon" src="images/game-icon.png" alt="">

            <div class="content">
                <h4>Pikachu</h4>

                <p>Lượt tải: 22.990 | Cập nhật: 12/6/2012</p>

                <div class="star"></div>
                <span>403 Ratings</span>
            </div>
            <!-- End .content -->
            <div class="action">
                <p class="price">15.000đ</p>
				<p class="more"></p>
            </div>
            <!-- End .action -->
        </div>
        <!-- End .item -->
        <div class="item alternate-item">
            <div class="status status">

            </div>
            <!-- End .status -->
            <img class="game-icon" src="images/game-icon.png" alt="">

            <div class="content">
                <h4>Pikachu</h4>

                <p>Lượt tải: 22.990 | Cập nhật: 12/6/2012</p>

                <div class="star"></div>
                <span>403 Ratings</span>
            </div>
            <!-- End .content -->
            <div class="action">
                <p class="free">Free</p>
				<p class="more"></p>
            </div>
            <!-- End .action -->
        </div>
        <!-- End .item -->
        <div class="item">
            <div class="status status-new">

            </div>
            <!-- End .status -->
            <img class="game-icon" src="images/game-icon.png" alt="">

            <div class="content">
                <h4>Pikachu</h4>

                <p>Lượt tải: 22.990 | Cập nhật: 12/6/2012</p>

                <div class="star"></div>
                <span>403 Ratings</span>
            </div>
            <!-- End .content -->
            <div class="action">
                <p class="price">15.000đ</p>
				<p class="more"></p>
            </div>
            <!-- End .action -->
        </div>
        <!-- End .item -->
    </div>
    <!-- End #main-content -->
    <div id="category-nav">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td><a href="#" onclick="return false;" id="category">Categories</a></td>
                <td><a href="#">Top new</a></td>
                <td><a href="#">Top rate</a></td>
                <td><a href="#">Hot<span class="hot">!</span></a></td>
            </tr>
        </table>
    </div>
    <!-- End #category-nav -->
    <div id="category-sub-nav">
        <a href="#">Games</a>
        <a href="#">Apps</a>
        <a href="#">Books</a>
    </div>
    <!-- End #category-sub-nav -->
    <div id="paging">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td class="paging-word"><a href="#">First page</a></td>
				<td class="paging-control">
					 <a href="#"><<</a>
				</td>
                <td id="paging-number">
                    <span id="page-en-US">page 1/5</span>
                </td>
				<td class="paging-control">
					<a href="#">>></a>
				</td>
                <td class="paging-word"><a href="#">Last page</a></td>
            </tr>
        </table>
    </div>
    <!-- End #paging -->
</div>
<!-- End #main -->

<div id="footer">
    <img id="banner" src="images/footer-banner.png" alt="">

    <div class="service-title" id="service-title-en-US">
    </div>
    <!-- End #service-title -->
    <div id="service-content">
        <img src="images/footer-logo.png" alt="">

        <p id="copy-right">POWERED BY trunggt4</p>
        <a href="#" class="service" id="email"></a>
        <a href="#" class="service" id="phone"></a>
    </div>
    <!-- End #service -->
</div>
<!-- End #footer -->

<div class="clear"></div>
</div>
<!-- End #wrapper-->
<script type="text/javascript">
    //Execute the function when window load
    $(window).bind("load", function() {

        //setup the height and position for your sticky footer
        $categoryNav = $("#category-nav");
        $categoryNavSub = $("#category-sub-nav");
        $categoryItem = $("#category");

		$actionPanel = $("#action-panel");
        $searchPanel = $("#search-panel");
        $loginPanel = $("#login-panel");
        $languagePanel = $("#language-panel");
		$bannerSlider = $("#banner-slider");

		$bannerSlider.css({
			position: "absolute",
            left: -(($bannerSlider.width()-$("body").width())/2) + "px"
        });

		$languagePanel.css({
            top: ($actionPanel.height() - $languagePanel.height()) + "px"
        });
		$loginPanel.css({
            top: ($actionPanel.height() - $loginPanel.height()) + "px"
        });
		$searchPanel.css({
            top: ($actionPanel.height() - $searchPanel.height()) + "px"
        });

        $btnSearch = $("#btn-search");
        $btnLogin = $("#btn-login");
        $btnLanguage = $("#btn-language");
        positionFooter();


        function positionFooter() {

            $categoryNavSub.hide();

            if ($categoryNavSub.is(':hidden')) {
                $categoryItem.parent().removeClass("active");
            } else {

                $categoryItem.parent().addClass("active");
            }

            var bottom = $("body").height() - ($(window).height() + $(window).scrollTop());
            if (bottom > 247) {
                $categoryNav.css({
                    position: "fixed", bottom: "0px"
                });
            } else {
                $categoryNav.css({
                    position: "absolute", bottom: "50px"
                });
            }
        }

        function categoryItem_Click() {

            var categoryItemWidth = $categoryItem.width() - 1;

            var bottom = $("body").height() - ($(window).height() + $(window).scrollTop());
            if (bottom > 247) {
                $categoryNavSub.css({
                    width:categoryItemWidth + "px",
                    position: "fixed",
                    bottom: "40px"
                });
            } else {
                $categoryNavSub.css({
                    width:categoryItemWidth + "px",
                    position: "absolute",
                    bottom: "90px"
                });
            }
            if ($categoryNavSub.is(':hidden')) {
                $categoryItem.parent().addClass("active");
            } else {
                $categoryItem.parent().removeClass("active");
            }
            $categoryNavSub.slideToggle("normal");

        }

        $(window).scroll(positionFooter).resize(positionFooter);
        $categoryItem.click(categoryItem_Click);

        function search_Click() {
            hidePanel($loginPanel);
            hidePanel($languagePanel);
			execAminatePanel($searchPanel);
        }
        $btnSearch.click(search_Click);

        function login_Click() {
			hidePanel($searchPanel);
            hidePanel($languagePanel);
			execAminatePanel($loginPanel);
        }
        $btnLogin.click(login_Click);

        function language_Click() {
            hidePanel($searchPanel);
            hidePanel($loginPanel);
            execAminatePanel($languagePanel);
        }
        $btnLanguage.click(language_Click);

        function actionHandle_Scroll(){
            hidePanel($searchPanel);
            hidePanel($loginPanel);
            hidePanel($languagePanel);
        }

		function bannerHandle_Scroll(){
            $bannerSlider.css({
				position: "absolute",
				left: -(($bannerSlider.width()-$("body").width())/2) + "px"
			});
        }

		function execAminatePanel(panel)
		{
			if(!$(panel).is(':hidden')){
				$(panel).animate(
					{
						"top": "-=" + $(panel).height() + "px"
					},
					"normal",
					function() {
						$(panel).hide();
					}
				);
            }else{
				$(panel).show();
				$(panel).animate(
					{
						"top": "+=" + $(panel).height() + "px"
					},
					"normal"
				);
            }
		}

		function hidePanel(panel)
		{
			$(panel).hide();
			$(panel).css({
				top: ($actionPanel.height() - $(panel).height()) + "px"
			});
		}

        $(window).scroll(actionHandle_Scroll).resize(actionHandle_Scroll);
		$(window).scroll(actionHandle_Scroll).resize(bannerHandle_Scroll);
    });
    $('.star').raty({
        readOnly : true,
        score    : 4,
        size:22
    });

	$("#slider").hover(
		function () {
			var itemWidth = $("#banner-slider-current").width();
			var height = $("#slider").height();
			var width = $("#slider").width();
			var m = $("#slider-next").width()/4;
			$("#slider-next").css({
				top: ((height-$("#slider-next").height()) /2)+"px",
				left: ((width-itemWidth)/2 +itemWidth - m) + "px"
			});
			$("#slider-back").css({
				top: ((height-$("#slider-back").height()) /2)+"px",
				right: ((width-itemWidth)/2 +itemWidth - m) + "px"
			});
			$("#slider-next").fadeIn("slow");
			$("#slider-back").fadeIn("slow");
		},
		function () {
			$("#slider-next").fadeOut("slow");
			$("#slider-back").fadeOut("slow");
		}
	);

	// Ride the carousel...
	jQuery(document).ready(function() {
		jQuery("#banner-slider").jcarousel({
			scroll: 1,
			visible: 3,
			initCallback: slider_initCallback,
			itemVisibleInCallback: {
				onBeforeAnimation: function(){
					$("#banner-slider-current").css({
						'opacity':'0'
					});
				},
				onAfterAnimation: function(){
					$("#banner-slider-current").css({
						'opacity':'1'
					});
				}
			},
			buttonNextHTML: null,
			buttonPrevHTML: null,
			wrap: 'both',
            auto: 10
		});
	});

	jQuery(document).ready(function() {
		jQuery("#banner-slider-current").jcarousel({
			scroll: 1,
			visible: 1,
			initCallback: slider_initCallback,
            itemVisibleInCallback: highlight,
            itemVisibleOutCallback: removehighlight,
			buttonNextHTML: null,
			buttonPrevHTML: null,
			wrap: 'both',
            auto: 10
		});
	});

    var sliders = [];

	function slider_initCallback(carousel) {

        sliders.push(carousel);
        /*
		jQuery('.jcarousel-control a').bind('click', function() {
			carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
            return false;
		});*/
        carousel.clip.hover(
            function() {
                for(j=0;j<sliders.length;j++){
                    sliders[j].stopAuto();
                }
            },
            function() {
                for(j=0;j<sliders.length;j++){
                    sliders[j].startAuto();
                }
            }
        );
		jQuery('#slider-next').bind('click', function() {
			carousel.next();
			return false;
		});
		jQuery('#slider-back').bind('click', function() {
			carousel.prev();
			return false;
		});
	}

    function highlight(carousel, obejctli, liindex, listate) {
	    $('.jcarousel-control a:nth-child(' + liindex + ')').addClass("active");
    }
    
    function removehighlight(carousel, obejctli, liindex, listate) {
        $('.jcarousel-control a:nth-child(' + liindex + ')').removeClass("active");
    }
</script>
</body>
</html>